        <!DOCTYPE html>
        <html>
        <head>
                <meta charset="utf-8">
        <title>CanvasViewportTransform class / box2d_browser Library / Dart Documentation</title>
        <link rel="stylesheet" type="text/css"
            href="../styles.css">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="../favicon.ico">
        
        </head>
        <body data-library="box2d_browser" data-type="CanvasViewportTransform">
        <div class="page">
        <div class="header">
          <a href="../index.html"><div class="logo"></div></a>
          <a href="../index.html">Dart Documentation</a>
         &rsaquo; <a href="../box2d_browser.html">box2d_browser</a> &rsaquo; <a href="../box2d_browser/CanvasViewportTransform.html">CanvasViewportTransform</a>        <div id="search-box">
          <input type="search" name="q" id="q" autocomplete="off"
              class="search-input" placeholder="Search API">
        </div>
        
      </div>
      <div class="drop-down" id="drop-down"></div>
      
        <div class="nav">
        
</div>
<div class="content">
        <h2><strong>CanvasViewportTransform</strong>
          class
        </h2>
        
<button id="show-inherited" class="show-inherited">Hide inherited</button>
<div class="doc">
<pre class="source">
class CanvasViewportTransform extends ViewportTransform {
 static const int DEFAULT_DRAWING_SCALE = 20;

 /**
  * Constructs a new viewport transform with the default scale.
  */
 CanvasViewportTransform(vec2 _extents, vec2 _center) :
   super(_extents, _center, DEFAULT_DRAWING_SCALE) {
   yFlip = true;
 }

 /**
  * Sets the rendering context such that all drawing commands given in terms
  * of the world coordinate system will display correctly on the canvas screen.
  */
 void updateTransformation(CanvasRenderingContext2D ctx) {
   // Clear all previous transformation.
   ctx.setTransform(1,0,0,1,0,0);

   // Translate to the center of the canvas screen. This will be considered the
   // actual origin.
   ctx.translate(extents.x, extents.y);

   // Translate to account for the currently applied translation.
   ctx.translate(translation.x, translation.y);

   // Scale everything according to the current scale and mirror the y-axis.
   ctx.scale(scale, -scale);
 }
}
</pre>
</div>
<h3>Extends</h3>
<p>
<span class="type-box"><span class="icon-class"></span><a href="../box2d/ViewportTransform.html">ViewportTransform</a></span>&nbsp;&gt;&nbsp;<span class="type-box"><span class="icon-class"></span><strong>CanvasViewportTransform</strong></span></p>
<div>
<h3>Static Properties</h3>
<div class="field"><h4 id="DEFAULT_DRAWING_SCALE">
<button class="show-code">Code</button>
const int         <strong>DEFAULT_DRAWING_SCALE</strong> <a class="anchor-link"
            href="#DEFAULT_DRAWING_SCALE"
            title="Permalink to CanvasViewportTransform.DEFAULT_DRAWING_SCALE">#</a>
        </h4>
        <div class="doc">
<pre class="source">
DEFAULT_DRAWING_SCALE = 20
</pre>
</div>
</div>
</div>
<div>
<h3>Constructors</h3>
<div class="method"><h4 id="CanvasViewportTransform">
<button class="show-code">Code</button>
new <strong>CanvasViewportTransform</strong>(<a href="../vector_math/vec2.html">vec2</a> _extents, <a href="../vector_math/vec2.html">vec2</a> _center) <a class="anchor-link" href="#CanvasViewportTransform"
              title="Permalink to CanvasViewportTransform.CanvasViewportTransform">#</a></h4>
<div class="doc">
<p>Constructs a new viewport transform with the default scale.</p>
<pre class="source">
CanvasViewportTransform(vec2 _extents, vec2 _center) :
 super(_extents, _center, DEFAULT_DRAWING_SCALE) {
 yFlip = true;
}
</pre>
</div>
</div>
</div>
<div class="inherited">
<h3>Properties</h3>
<div class="field inherited"><h4 id="center">
<button class="show-code">Code</button>
<a href="../vector_math/vec2.html">vec2</a>         <strong>center</strong> <a class="anchor-link"
            href="#center"
            title="Permalink to CanvasViewportTransform.center">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<pre class="source">
center
</pre>
</div>
</div>
<div class="field inherited"><h4 id="extents">
<button class="show-code">Code</button>
<a href="../vector_math/vec2.html">vec2</a>         <strong>extents</strong> <a class="anchor-link"
            href="#extents"
            title="Permalink to CanvasViewportTransform.extents">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<pre class="source">
extents
</pre>
</div>
</div>
<div class="field inherited"><h4 id="scale">
<button class="show-code">Code</button>
num         <strong>scale</strong> <a class="anchor-link"
            href="#scale"
            title="Permalink to CanvasViewportTransform.scale">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<pre class="source">
scale
</pre>
</div>
</div>
<div class="field inherited"><h4 id="translation">
<button class="show-code">Code</button>
<a href="../vector_math/vec2.html">vec2</a>         <strong>translation</strong> <a class="anchor-link"
            href="#translation"
            title="Permalink to CanvasViewportTransform.translation">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<p>The current translation is the difference in canvas units between the
actual center of the canvas and the currently specified center. For
example, if the actual canvas center is (5, 5) but the current center is
(6, 6), the translation is (1, 1).</p>
<pre class="source">
vec2 get translation =&gt; extents - center;
</pre>
<pre class="source">
void set translation(vec2 translation) {
 center.copyFrom(extents).sub(translation);
}
</pre>
</div>
</div>
<div class="field inherited"><h4 id="yFlip">
<button class="show-code">Code</button>
bool         <strong>yFlip</strong> <a class="anchor-link"
            href="#yFlip"
            title="Permalink to CanvasViewportTransform.yFlip">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<pre class="source">
yFlip
</pre>
</div>
</div>
</div>
<div>
<h3>Methods</h3>
<div class="method inherited"><h4 id="getScreenToWorld">
<button class="show-code">Code</button>
void <strong>getScreenToWorld</strong>(<a href="../vector_math/vec2.html">vec2</a> argScreen, <a href="../vector_math/vec2.html">vec2</a> argWorld) <a class="anchor-link" href="#getScreenToWorld"
              title="Permalink to CanvasViewportTransform.getScreenToWorld">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<p>Takes the screen coordinates (argScreen) and puts the
corresponding world coordinates in argWorld. It should be safe
to give the same object as both parameters.</p>
<pre class="source">
void getScreenToWorld(vec2 argScreen, vec2 argWorld) {
 num translationCorrectedX = argScreen.x - translation.x;
 num translationCorrectedY = argScreen.y + translation.y;

 num gridCorrectedX = (translationCorrectedX - extents.x) / scale;
 num gridCorrectedY = ((translationCorrectedY - extents.y) * -1) / scale;
 argWorld.x = gridCorrectedX;
 argWorld.y = gridCorrectedY;
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="getWorldToScreen">
<button class="show-code">Code</button>
void <strong>getWorldToScreen</strong>(<a href="../vector_math/vec2.html">vec2</a> argWorld, <a href="../vector_math/vec2.html">vec2</a> argScreen) <a class="anchor-link" href="#getWorldToScreen"
              title="Permalink to CanvasViewportTransform.getWorldToScreen">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<p>Takes the world coordinate (argWorld) puts the corresponding
screen coordinate in argScreen.  It should be safe to give the
same object as both parameters.</p>
<pre class="source">
void getWorldToScreen(vec2 argWorld, vec2 argScreen) {
 // Correct for canvas considering the upper-left corner, rather than the
 // center, to be the origin.
 num gridCorrectedX = (argWorld.x * scale) + extents.x;
 num gridCorrectedY = extents.y - (argWorld.y * scale);

 argScreen.x = gridCorrectedX + translation.x;
 argScreen.y = gridCorrectedY - translation.y;
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="setCamera">
<button class="show-code">Code</button>
void <strong>setCamera</strong>(num x, num y, num s) <a class="anchor-link" href="#setCamera"
              title="Permalink to CanvasViewportTransform.setCamera">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d/ViewportTransform.html">ViewportTransform</a> </div><div class="doc">
<p>Sets the transform's center to the given x and y coordinates,
and using the given scale.</p>
<pre class="source">
void setCamera(num x, num y, num s) {
 center.setComponents(x,y);
 scale = s;
}
</pre>
</div>
</div>
<div class="method"><h4 id="updateTransformation">
<button class="show-code">Code</button>
void <strong>updateTransformation</strong>(CanvasRenderingContext2D ctx) <a class="anchor-link" href="#updateTransformation"
              title="Permalink to CanvasViewportTransform.updateTransformation">#</a></h4>
<div class="doc">
<p>Sets the rendering context such that all drawing commands given in terms
of the world coordinate system will display correctly on the canvas screen.</p>
<pre class="source">
void updateTransformation(CanvasRenderingContext2D ctx) {
 // Clear all previous transformation.
 ctx.setTransform(1,0,0,1,0,0);

 // Translate to the center of the canvas screen. This will be considered the
 // actual origin.
 ctx.translate(extents.x, extents.y);

 // Translate to account for the currently applied translation.
 ctx.translate(translation.x, translation.y);

 // Scale everything according to the current scale and mirror the y-axis.
 ctx.scale(scale, -scale);
}
</pre>
</div>
</div>
</div>
        </div>
        <div class="clear"></div>
        </div>
        <div class="footer">
          
        </div>
        <script async src="../client-live-nav.js"></script>
        </body></html>
        
